<template>
    <div class="app-container">
      <a class="more-logs" href="javascript:;" @click="loadmore" >更多沟通记录>></a>

        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
                  style="width: 100%">

          <el-table-column align="center" :label="$t('table.showId')" width="65">
            <template slot-scope="scope">
              <span>{{scope.row.showId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="供应商简称">
            <template slot-scope="scope">
              <span>{{scope.row.supplyName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="沟通时间">
            <template slot-scope="scope">
              <span>{{scope.row.commTime | $dateConvert("YYYY-MM-DD HH:mm:ss")}}</span>
            </template>
          </el-table-column>


          <el-table-column align="center" label="沟通状态" width="180px">
              <template slot-scope="scope">
                  <span>{{scope.row.status | validFilter}}</span>
              </template>
          </el-table-column>

          <el-table-column align="center" label="沟通方式">
            <template slot-scope="scope">
              <el-tag v-for="(item,index) in scope.row.commType.split(',')" type="success" :key="index">{{item | $commTypeFilter}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="沟通目的">
            <template slot-scope="scope">
              <span>{{scope.row.commGoal | commGoalFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="沟通进度">
            <template slot-scope="scope">
              <span>{{scope.row.commProgress |commProgressFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="沟通难度">
            <template slot-scope="scope">
              <span>{{scope.row.commDifficulty |commDifficultyFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="咔哒对接人">
            <template slot-scope="scope">
              <span>{{scope.row.objName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.actions')" width="180" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button v-has="'commTable_edit'" type="primary" size="mini"  v-if="scope.row.status=='T'" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
              <el-button v-has="'commTable_info'" type="info" size="mini" @click="handleInfo(scope.row)">{{$t('table.info')}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>


    </div>
</template>

<script>
  import { fetchList, fetchLinkManList, invalidCommunication } from '@/api/communication/communication'
  import waves from '@/directive/waves' // 水波纹指令
  import { parseTime } from '@/utils'

  export default {
    name: 'CommunicationList',
    directives: {
      waves
    },
    props: {
      supplyId: String
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: null,
        listLoading: true,
        page: {
          page: 1,
          limit: 20,
          sort: ''
        },
        listQuery: {
          supplyName: undefined,
          linkNameId: undefined,
          linkName: undefined,
          commTime: undefined,
          commType: undefined,
          commGoal: undefined,
          commProgress: undefined,
          commDifficulty: undefined,
          objId: undefined,
          objName: undefined,
          commContext: undefined,
          commResult: undefined,
          supplyId: this.supplyId,
          'page.limit': 5,
          'page.sort': 'SHOW_ID',
          'page.order': 'DESC'
        },
        commGoalOptions: [{ label: '接洽', key: 'CONTACT' }, { label: '内容引入', key: 'CONTENT' }, { label: '内容输入', key: 'INPUT' }, { label: '商务交流', key: 'BUSINESS' }],
        commProgressOptions: [{ label: '待完成', key: 'WAIT' }, { label: '已完成', key: 'FINISH' }],
        commDifficultyOptions: [{ label: '一星', key: 'ONE' }, { label: '二星', key: 'TWO' }, { label: '三星', key: 'THREE' }, { label: '四星', key: 'FOUR' }, { label: '五星', key: 'FIVE' }],
        linkManOptions: [],
        temp: {
          supplyId: '',
          supplyName: '',
          linkNameId: '',
          linkName: '',
          commTime: '',
          commType: '',
          commGoal: '',
          commProgress: '',
          commDifficulty: '',
          objId: '',
          objName: '',
          commContext: '',
          commResult: ''
        },
        downloadLoading: false
      }
    },

    filters: {
      commGoalFilter(commGoal) {
        const commGoalMap = {
          GEREN: '个人',
          CONTACT: '接洽',
          CONTENT: '内容引入',
          INPUT: '内容输入',
          BUSINESS: '商务交流'
        }
        return commGoalMap[commGoal]
      },
      commProgressFilter(commProgress) {
        const commProgressMap = {
          WAIT: '待完成',
          FINISH: '已完成'
        }
        return commProgressMap[commProgress]
      },
      commDifficultyFilter(commDifficulty) {
        const commDifficultyMap = {
          ONE: '一星',
          TWO: '二星',
          THREE: '三星',
          FOUR: '四星',
          FIVE: '五星'
        }
        return commDifficultyMap[commDifficulty]
      },
      validFilter(status) {
        const statusMap = {
          T: '已生效',
          F: '已失效'
        }
        return statusMap[status]
      }
    },
    created() {
      this.getList()
      // this.getLinkManList()
    },
    methods: {
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.content.list
          this.total = response.content.total
          this.listLoading = false
        })
      },
      getLinkManList() {
        this.listLoading = true
        fetchLinkManList().then(response => {
          if (response.success) {
            for (var a = 0; a < response.content.length; a++) {
              var aa = { label: response.content[a].userName, key: response.content[a].id }
              this.linkManOptions.push(aa)
            }
          }
        })
      },
      // 搜索按钮
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      // 跳转页数
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      // 详情
      handleInfo(row) {
        this.$router.push({ name: 'commInfo', query: { id: row.id, opt: 'info' }})
      },
      resetTemp() {
        this.temp = {
          supplyId: '',
          supplyName: '',
          linkNameId: '',
          linkName: '',
          commTime: '',
          commType: '',
          commGoal: '',
          commProgress: '',
          commDifficulty: '',
          objId: '',
          objName: '',
          commContext: '',
          commResult: ''
        }
      },
      //
      handleCreate() {
        this.$router.push({ name: 'commAdd' })
      },
      // 更新页面
      handleUpdate(row) {
        this.$router.push({ name: 'commEdit', query: { id: row.id }})
      },
      // 失效操作
      handleInvalid(row) {
        this.$confirm('失效后，该条数据不可操作，确认失效?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((response) => {
          // 调用删除接口
          var p = { id: row.id }
          invalidCommunication(p).then(response => {
            if (response.success) {
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
      handleExcelExport() {
        // TODO excel导出
      },
      loadmore() {
        var rowsParams = { 'page.limit': 1000 }
        this.listQuery = Object.assign(this.listQuery, rowsParams)
        this.getList()
      }

    }
  }
</script>

<style scoped>
  .app-container {
    text-align:right
  }

  .more-logs {
    font-size: 13px;
  }



</style>
